<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp"%>

<script type="application/javascript" src="/static/webjars/layui/layui.js"></script>

<div id="saper-container">
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2 class="layui-col-md3">重点人管理</h2>

            <div class="layui-col-md2 layui-btn" style="background-color:#6ec673; float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 60px;margin-right: 10px;margin-left: 2px;" onclick="refresh('addkeyperson')">
                添加
            </div>
            <div class="layui-col-md2" style="float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 10px;margin-right: 10px;margin-left: 2px;" >
            </div>
            <div class="layui-col-md1 layui-btn" onclick="search();" style="background-color:#3b9fe1;float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 60px;margin-right: 10px;margin-left: 2px;" >
                搜索
            </div>
            <div class="layui-col-md2 layui-btn-danger" style="float: right">
                <input type="text" id="searchvalue" placeholder="请输入搜索内容" autocomplete="off" class="layui-input" style="height: 33px;">
            </div>

        </div>
    </div>

</div>
<div class="layui-col-md12">
    <table class="layui-table" id="data" lay-filter="data"></table>
</div>

<%@ include file="../common/footer.jsp"%>

<script type="application/javascript">
    var table = layui.table;
    var layer = layui.layer;
    var limitNum = 15;
    var limitNums = [15,30,45,60,75,90]
    //数据
    table.render({
        id: 'keyperson'
        ,elem: '#data' //指定原始表格元素选择器（推荐id选择器）
        ,url: '/ajax/search/getkeyperson-limit'
        ,method: 'post'
        ,request: {
            pageName: 'limitPage' //页码的参数名称，默认：page
            ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
        }
        ,response: {
            statusName: 'res' //数据状态的字段名称，默认：code
            ,statusCode: 1 //成功的状态码，默认：0
            ,msgName: 'code' //状态信息的字段名称，默认：msg
            ,countName: 'count' //数据总数的字段名称，默认：count
            ,dataName: 'data' //数据列表的字段名称，默认：data
        }
        ,where: {
            status: '1'
        }
        ,limit: limitNum
        ,limits: limitNums
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
        }
        ,cols: [[
            {field:'id', title: 'ID', width:60, style:'text-align:center;',align:'center', sort: true}
            ,{field:'name', title: '名字', style:'text-align:center;',align:'center', width:100}
            ,{field:'sex', title: '性别', style:'text-align:center;',align:'center', width:65}
            ,{field:'born', title: '年龄', style:'text-align:center;',align:'center', width:65}
            ,{field:'nation', title: '民族', style:'text-align:center;',align:'center', width:65}
            ,{field:'education', title: '教育', style:'text-align:center;',align:'center', width:120}
            ,{field:'tellphone', title: '联系方式', style:'text-align:center;',align:'center', width:120}
            ,{field:'nativePlace', title: '籍贯', style:'text-align:center;',align:'center' }
            ,{field:'nowPlace', title: '现居地', style:'text-align:center;',align:'center' }
            ,{field:'nowSituation', title: '当前情况', style:'text-align:center;',align:'center' }
            ,{field:'time', title: '关注时间', style:'text-align:center;',align:'center' }
            ,{field:'right', title: '管理', width:160, style:'text-align:center;',align:'center', toolbar: '#manageBar'}
        ]] //设置表头
    });

    //监听工具条
    table.on('tool(data)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if(layEvent === 'detail'){ //查看
            /*getHor(data.id);*/

            layer.open({
                type: 2,
                title: '',
                /*  btn: ['取消'],*/
                btnAlign: 'c',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['70%', '80%'],
                content: '/supervise/imp_person_detail',
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    body.contents().find("#id").val(data.id);
                    body.contents().find("#name").val(data.name);
                    body.contents().find("#sex").val(data.sex);
                    body.contents().find("#birth").val(data.born);
                    body.contents().find("#tellphone").val(data.tellphone);
                    body.contents().find("#born").val(data.time);
                    body.contents().find("#nation").val(data.nation);
                    body.contents().find("#education").val(data.education);
                    body.contents().find("#nativePlace").val(data.nativePlace);
                    body.contents().find("#nowPlace").val(data.nowPlace);
                    body.contents().find("#reason").val(data.reason);
                    body.contents().find("#nowSituation").val(data.nowSituation);
                    body.contents().find("#remarks").val(data.remarks);
                    body.contents().find("#status").val(data.status);

                }

            });
        }else if(layEvent === 'trajectory'){

        } else if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
                data.status = '0';
                dataSave(data);
            });
        } else if(layEvent === 'edit'){ //编辑
            //do something

            //同步更新缓存对应的值
            obj.update({
                username: '123'
                ,title: 'xxx'
            });
        }
    });


</script>

<%--//更新数据--%>
<script type="application/javascript">
    //更新接口
    function dataSave(data){
        $.ajax({
            url: "/ajax/save/keyperson",
            type: "POST",
            contentType : 'application/json;charset=utf-8',
            //设置请求头信息
            dataType:"json",
            data: JSON.stringify(data),
            success: function(data){
                layer.msg(data.code);
            },
            error: function(res){
                layer.msg(res);
            }
        });
    }

    function getHor(id){
        $.ajax({
            url: "/ajax/search/getgis",
            type: "POST",
            contentType : 'application/x-www-form-urlencoded;charset=utf-8',
            data: {
                tableName: '重点人员表',
                idIndex: id,
                limitPage: '1',
                limitNum: '10'
            },
            success: function(res){
                layer.open({
                    type: 1,
                    area: ['80%','90%'],
                    content: timeLine(res.data)  //这里content是一个普通的String
                });
            },
            error: function(res){
                layer.msg(res);
            }
        });

    }

</script>


<script type="text/html" id="manageBar">


    <a class="layui-btn layui-btn-xs" lay-event="detail">查看与修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取关</a>

</script>

<script>

    function search() {//数据

        var search = $("#searchvalue").val();
        table.reload("keyperson",{
            elem: '#data' //指定原始表格元素选择器（推荐id选择器）
            ,url: '/ajax/search/getkeyperson-limit'
            ,method: 'post'
            ,request: {
                pageName: 'limitPage' //页码的参数名称，默认：page
                ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
            }
            ,response: {
                statusName: 'res' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'code' //状态信息的字段名称，默认：msg
                ,countName: 'count' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,where: {
                status: '1',
                search: search
            }
            ,limit: limitNum
            ,limits: limitNums
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
            ,cols: [[
                {field:'id', title: 'ID', width:60, style:'text-align:center;',align:'center', sort: true}
                ,{field:'name', title: '名字', style:'text-align:center;',align:'center', width:100}
                ,{field:'sex', title: '性别', style:'text-align:center;',align:'center', width:65}
                ,{field:'born', title: '年龄', style:'text-align:center;',align:'center', width:65}
                ,{field:'nation', title: '民族', style:'text-align:center;',align:'center', width:65}
                ,{field:'education', title: '教育', style:'text-align:center;',align:'center', width:120}
                ,{field:'tellphone', title: '联系方式', style:'text-align:center;',align:'center', width:120}
                ,{field:'nativePlace', title: '籍贯', style:'text-align:center;',align:'center', width:120}
                ,{field:'nowPlace', title: '现居地', style:'text-align:center;',align:'center'}
                ,{field:'nowSituation', title: '当前情况', style:'text-align:center;',align:'center'}
                ,{field:'time', title: '关注时间', style:'text-align:center;',align:'center', width:180}
                ,{field:'right', title: '管理', width:160, style:'text-align:center;',align:'center', toolbar: '#manageBar'}
            ]] //设置表头
        });
    }
</script>

